<template>
	<view class="container pageBg">
		<view class="content">
			<view class="set" @click="getSet" :style="{ top: getStatusBarHeight() + 'px' }">
				<uni-icons type="gear" size="30"></uni-icons>
			</view>
			<view class="top">
				<view class="avator">
					<template v-if="!userInfo || !userInfo.headPic">
						<uni-icons type="person" size="30"></uni-icons>
					</template>
					<img v-else class="avator" width="50" :src="`${BASE_URL}/${userInfo.headPic}`" alt="" />
				</view>
				<view class="right">
					<view class="notice" v-if="!userInfo">欢迎来到易查企</view>
					<view class="notice" @click="goUpdateInfo" v-else>{{ userInfo.nickName }}</view>
					<navigator url="/pages/register/register" class="login" v-if="!userInfo">注册/登录></navigator>
					<view class="time" v-else>易查企已陪伴您{{ getDaysFromToday(userInfo.createTime) }}天</view>
				</view>
			</view>
			<view class="tab">
				<view class="myFavorite" @click="goDetail(userInfo.id)">
					<view class="favoriteNum">
						{{ userInfo.favorites?.length }}
					</view>
					<view class="favorites">我的收藏</view>
				</view>
			</view>
			<view class="title_bar">
				<view class="title">常用功能</view>
				<view class="item-list">
					<view class="item" @click="goDetail(userInfo.id)">
						<uni-icons type="star" size="35"></uni-icons>
						<view class="text">我的关注</view>
					</view>
					<view class="item" @click="myNotification(userInfo.id)">
						<uni-icons type="chat" size="35"></uni-icons>
						<view class="text">通知</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { getInfo } from '../../api/user';
import { getDaysFromToday } from '../../utils/common';
import { getStatusBarHeight } from '../../utils/system';
import { BASE_URL } from '../../utils/system.js';
const userInfo = ref({});

const getUserInfo = async () => {
	const res = await getInfo();
	userInfo.value = res.data;
};

const getSet = () => {
	uni.navigateTo({
		url: '/pages/setting/setting'
	});
};
onShow(() => {
	getUserInfo();
	userInfo.value = uni.getStorageSync('user_info');
});

const goUpdateInfo = () => {
	uni.navigateTo({
		url: '/pages/updateInfo/updateInfo'
	});
};

const goDetail = (id) => {
	uni.navigateTo({
		url: `/pages/myFavorite/myFavorite?id=${id}`
	});
};
const myNotification = (id) => {
	uni.navigateTo({
		url: `/pages/notification/notification?id=${id}`
	});
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #e6f2ff 0%, #e0edfe 50%, #e4f2ff 100%);

	.content {
		padding-top: 150rpx;
		.set {
			position: absolute;
			right: 60rpx;
		}
		.top {
			display: flex;
			padding-left: 60rpx;
			.avator {
				width: 100rpx;
				height: 100rpx;
				background-color: #fff;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.right {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.notice {
					font-weight: 800;
					font-family: 'KaiTi', sans-serif;
					font-size: 40rpx;
				}
				.login {
					background-color: #fff;
					width: 180rpx;
					text-align: center;
					border-radius: 50rpx;
					font-size: 30rpx;
				}
			}
		}
		.tab {
			width: 100vw;
			height: 150rpx;
			background-color: #fff;
			margin-top: 40rpx;
			font-family: 'KaiTi', sans-serif;
			font-weight: 700;
			display: flex;
			align-items: center; /* 垂直居中 */
			border-radius: 20rpx;
			.myFavorite {
				margin-left: 60rpx;
				width: 150rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: center; /* 垂直居中 */
				.favoriteNum {
					text-align: center;
				}
			}
		}
		.title_bar {
			margin-top: 30rpx;
			margin-left: 50rpx;
			.title {
				font-family: 'KaiTi', sans-serif;
				font-weight: 700;
				margin-bottom: 20rpx;
				font-size: 35rpx;
			}
			.item-list {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				align-items: center;
				.item {
					width: 20vw;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-right: 20rpx;
					margin-bottom: 30rpx;
					.text {
						margin-top: 10rpx;
					}
				}
			}
		}
	}
}
</style>
